<template>
  <div class="search">
    <div class="search-box">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        background="#E64D2E"
      >
       <template #left>
          <div @click="$router.push({path:'/Home'})" style="color: #fff;margin-right:10px" class="iconfont icon-arrow-left-bold"></div>
        </template>
        <template #action>
          <div @click="onSearch" style="color: #fff">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="hotList">
      <h3>热门搜索</h3>
      <div class="item">
        <div
          v-for="item in hotList"
          :key="item.id"
          @click="goBook(item.id, item.name)"
        >
          {{ item.name }}
        </div>
      </div>
      <h3 class="histy"><div>最近搜索</div><div class="iconfont icon-lajitong2" @click="delHistory"></div></h3>
      <div class="item history">
         <div
          v-for="item in history"
          :key="item.id"
          class="hst"
        >
          {{item}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSearchHot } from "../api/search";
export default {
  data() {
    return {
      value: "",
      hotList: null,
      history:null
    };
  },
  methods: {
    onSearch() {
      this.$router.push({
        path: "/searchData",
        query: { keywords: this.value },
      });
       this.$store.commit("searchHistory", this.value);
    },
    goBook(id, name) {
      console.log(id, name);
      this.$router.push({
        path: "/bookDetails",
        query: { id: id, name: name },
      });
    },
    delHistory(){
      this.history=[]
       this.$store.commit("searchHistory");
    }
  },
  created() {
    getSearchHot().then((data) => {
      this.hotList = data.list;
    });
   this.history = this.$store.state.searchHistory;
  },
};
</script>

<style lang="less">
.search {
  .search-box{
    // display: flex;
  }
  .hotList {
    h3 {
      padding:0 15px;
      background-color: #f5f5f5;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      color: #a19f9f;
    }
    .item {
      background-color: #fff;
      padding: 15px;
      display: flex;
      flex-wrap: wrap;
      div {
        margin: 10px;
        border: 1px solid #c8c8c8;
        border-radius: 4px;
        padding: 5px;
        font-size: 14px;
        color: #aba59a;
        // padding: 5px 10px;
        // background-color: rgb(196, 181, 181);
        // border-radius: 10px;
        // font-size: 14px;
      }
    }
  }
  h3{
    &.histy{
      display: flex;
      justify-content: space-between;
    align-items: center;
    
    }
  }

}
</style>